<template>
  <div class="mask">
    <div class="loading-code-run">
      <div
        :class="'item' + (index + 1)"
        v-for="(item, index) in textList"
        :key="index"
      >
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "LoadingCodeRun",
  props: {
    text: {
      type: String,
      default: "LOADING",
    },
  },
  setup(props) {
    const textList = props.text.split("").reverse();
    return {
      textList,
    };
  },
});
</script>
<style lang="scss" scoped>
// .rendeChild(@loop) when(@loop > 0) {
//   &:nth-child(@{loop}) {
//     animation-delay: (0.2s * @loop);
//   }
//   .rendeChild(@loop - 1);
// }
// @for $i from 1 through 7 {
//   .item#{$i} {
//     animation-delay: (0.2s * $i) !important;
//   }
// }
.mask{
  position: absolute;
  width:100%;
  height:100%;
  background: rgba(0,0,0,0.58);
  left: 0;
  top: 0;
}
.loading-code-run {
  position: absolute;
  width: 600px;
  height: 36px;
  left: 50%;
  top: 40%;
  margin-left: -300px;
  overflow: visible;
  user-select: none;
  cursor: default;
  div {
    position: absolute;
    width: 20px;
    height: 36px;
    opacity: 0;
    animation: move 2s linear infinite;
    transform: rotate(180deg);
    color: #fff;
    font-size: 20px;
    @for $i from 1 through 7 {
      &:nth-child(#{$i}) {
        animation-delay: (0.2s * $i);
      }
    }
  }
}

@keyframes move {
  0% {
    left: 0;
    opacity: 0;
  }
  35% {
    left: 41%;
    transform: rotate(0deg);
    opacity: 1;
  }
  65% {
    left: 59%;
    transform: rotate(0deg);
    opacity: 1;
  }
  100% {
    left: 100%;
    transform: rotate(-180deg);
    opacity: 0;
  }
}
</style>
